<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../js/vue.js"></script>
    <style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 
            1.使用 v-on:xxx 或者 @xxx 绑定事件，其中xxx是事件名；

            2.事件的回调需要配置在methods对象中，最终会在vm上；

            3.methods中配置的函数，不要用箭头函数！否则this就不是vm了（指向window）；

            4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或者组件实例对象；

            5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参。

         -->

         <button v-on:click="showInfo">点我一下-没括号</button>
        <!-- v-on:可以简写成@，v-on:click  简写成@click -->
        <button @click="showInfo">点我一下-没括号</button><!-- 调用函数名不带括号 -->

        <!-- 当事件触发时调用的函数的函数名可以带括号也可以不带扩号 -->
        <button @click="showInfo()">点我一下-有括号</button><!-- 调用函数名带括号 -->
        <!-- 
            带括号可以传递参数，如果函数带有形参，但是没有传入任何实参，那么会默认传入一个event对象(事件对象)
            通过事件对象，可以获取触发该事件的那个标签的所有信息
            比如：
        -->
        <button @click="showInfo($event,6,null)">点我一下-有括号-带参数</button>


        <div class="d1" @click="showInfo($event,6,null)" @mouseover="fun1" @mouseout="fun2">

        </div>

        <input type="text" @keydown="fun3" @keyup="fun4" @keypress="fun5">

        <!-- 
                注意：
                    vue通过v-on绑定的各类事件，是在JavaScript原生事件的基础上去掉on。
                    比如：JavaScript原生的点击事件是onclick。vue中通过v-on绑定的是click
                
         -->


    </div>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                
            },
            methods:{//这个对象里的各种函数都是我们事件绑定的函数
                showInfo(event){
                    alert("点我干啥~")
                    console.log(event);
                },
                fun1(){
                    console.log("我进来了~");
                },
                fun2(){
                    console.log("我出去了~");
                },
                fun3(){
                    //console.log("键盘按键被按下")
                },
                fun4(){
                    //console.log("键盘按键被弹起")
                },
                fun5(event){
                    //console.log("键盘按键被按下然后弹起")
                    console.log(event.key);//键盘被按的按键字符串
                }
            }
        })
    </script>
</body>
</html>